<template>
  <el-button type="primary" :icon="Plus" @click="addRow">新增</el-button>
  <el-button type="primary" :icon="Delete" @click="handlerDel()">删除</el-button>
  <el-button type="primary" :icon="Check" @click="save()">保存</el-button><span style="color: red;margin-left: 20px;">注意：点击保存后修改才生效！</span>
  <vxe-table ref="tableRef" border show-overflow :edit-config="editConfig" :data="tableData">
    <vxe-column type="checkbox" width="60"></vxe-column>
    <vxe-column type="seq" width="70"></vxe-column>

    <vxe-column field="sftz" title="是否通知" :edit-render="{}">
      <template #default="{ row }">
        <span>{{ row.sftz }}</span>
      </template>
      <template #edit="{ row }">
        <el-select v-model="row.sftz" placeholder="">
          <el-option
            v-for="item in sftzDic"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </vxe-column>

    <vxe-column field="xm" title="姓名" :edit-render="{ name: 'input' }"></vxe-column>

    <vxe-column field="gx" title="关系" :edit-render="{}">
      <template #default="{ row }">
        <span>{{ row.gx }}</span>
      </template>
      <template #edit="{ row }">
        <el-select v-model="row.gx" placeholder="">
          <el-option
            v-for="item in gxDic"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </vxe-column>

    <vxe-column field="nl" title="年龄" :edit-render="{ name: 'input' }"></vxe-column>
    <vxe-column field="dh" title="电话" :edit-render="{ name: 'input' }"></vxe-column>
    <vxe-column
      field="dwhzz"
      title="单位或住址（选填）"
      :edit-render="{ name: 'input' }"
    ></vxe-column>
  </vxe-table>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted} from 'vue'
import { Delete, Plus, Check } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { gxDic, sftzDic } from '../../config/dic'

const props = defineProps({
  blid: Number
})

const tableRef = ref()

const tableData = ref([])
const editConfig = ref({
  trigger: 'click',
  mode: 'row'
})

onMounted(() => {
  addRow()
  getTableData()
})

const getTableData = async () => {

  const tableName = 'bl_jtcy'
  let res = await window.db.select(
    `select * from ${tableName} where blid=?`,props.blid
  )
  tableData.value = res
}

const addRow = () => {
  tableData.value.push({
    sftz: '',
    xm: '',
    gx: '',
    nl: '',
    dh: '',
    dwhzz: ''
  })
}

const handlerDel = async () => {
  let ids = tableRef.value.getCheckboxRecords().map((row) => row._X_ROW_KEY)
  if (ids.length <= 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }

  tableRef.value.removeCheckboxRow()
}

const save = async () => {
  if (props.blid) {
    const tableName = 'bl_jtcy'
    let res = await window.db.update(`delete from ${tableName} where blid=?;`, props.blid)

    let data = tableRef.value.getFullData()
    for (let i = 0; i < data.length; i++) {
      let item = data[i]
      window.db.update(
        `INSERT INTO ${tableName} (blid, sftz, xm, gx, nl, dh, dwhzz) VALUES (?, ?, ?, ?, ?, ?, ?);`,
        props.blid,
        item.sftz,
        item.xm,
        item.gx,
        item.nl,
        item.dh,
        item.dwhzz
      )
    }
    ElMessage.success('保存成功！')
  }
}

defineExpose({
  save
})
</script>

<style lang="scss" scoped></style>
